import * as echarts from "echarts";
import { useEffect, useRef } from "react";
import Bar from "../../components/Bar";
const Home = () => {
  const domRef = useRef();
  const chartInit = () => {
    // const myChart = echarts.init(document.getElementById("main"));
    const myChart = echarts.init(domRef.current);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  };
  //  执行 chart 的初始化函数
  useEffect(() => {
    chartInit();
  });
  return (
    <div>
      {/* 准备一个 echarts 的挂载节点 */}
      <div ref={domRef} style={{ width: "500px", height: "500px" }}></div>
      <Bar 
        title='主流框架' 
        xData={['react','vue','angular']}
        yData={[30,40,50]}
        style={{width:'500px',height:'500px'}}
      />
    </div>
  );
};

export default Home;
